<template>
  <div class="demo">
    <template>
      <div v-if="mode === 'edit'">
        <div v-if="linkList && linkList.length > 0">
          <div
            v-for="item in linkList"
            :key="item"
            :style="{ textAlign: linkAlign }"
          >
            <el-link
              :href="item.linkHref"
              :target="linkTarget"
              :type="linkStatus"
              :disabled="linkRead"
              >{{ item.linkStr }}</el-link
            >
          </div>
        </div>
        <div v-else :style="{ textAlign: linkAlign }">
          <el-link
            :href="linkHref"
            :target="linkTarget"
            :type="linkStatus"
            :disabled="linkRead"
            >{{ linkStr }}</el-link
          >
        </div>
      </div>
      <div v-else>
        {{ value }}
      </div>
    </template>
  </div>
</template>
<script>
import datasource from "../../mixins/steps-datasource";
export default {
  name: "link",
  mixins: [datasource],
  props: {
    value: {
      type: String | Number | Object | Array,
    },
    mode: {
      default: "edit", // 编辑模式和 edit， 展示模式 view
    },
    readonly: {
      type: Boolean,
      default: false,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    linkStr: {
      default: "默认链接",
    },
    linkHref: {
      default: "",
    },
    linkTarget: {},
    linkStatus: {},
    linkRead: {},
    linkAlign:{
      default: "",
    }
  },
  icon: "",
  viewId: {},
  viewCode: {
    default: "view",
  },
  created() {
    console.log(this.value, "this.value");
    if (this.value) {
      this.linkStr = JSON.parse(this.value);
    }
  },
  methods: {},
  watch: {
    options: {
      immediate: true,
      deep: true,
      handler(val) {
        if (val && val.length) {
          this.linkList = val.map((item) => {
            return {
              linkHref: item._data.linkHref,
              linkStr: item._data.linkStr,
            };
          });
        }
      },
    },
  },
};
</script>
<style lang="scss" scoped>
.demo {
  width: 100%;
}
</style>
